<template>
	<view class="content">
		<view class="box">
			<view class="shopList" v-if="shop_list.length">
					<view class="sitem" v-for="item in shop_list" :key="item.id">
						<image :src="item.productPic" mode=""></image>
						<view class="right">
							<view class="name clamp2">
								{{item.productName}}
							</view>
							<view class="cate">
								规格：{{JSON.parse(item.productAttr).map(item => item.value).join('_')}}
							</view>  
							 <view class="sbot">
								<view class="price">
									￥{{item.price}}
								</view> 
								<!-- <view class="num">
									（共{{item.quantity}}件）
								</view> -->
							 </view> 
						</view>
					</view>
			</view>
			
			 <view class="addressInfo">
			 	<view class="title">
			 		<image src="/static/ad.png" mode=""></image>配送信息
			 	</view>
			 	<view class="bot" v-if="addressInfo">
			 		<view class="text">
			 			<view class="t1">
			 				{{addressInfo.name}} {{addressInfo.phoneNumber}}
			 			</view>
			 			<view class="t2 clamp1">
			 				{{addressInfo.detailAddress}}
			 			</view>
			 		</view>
			 		  <view class="icon2" v-if="address_list.length > 1"  @click="addressShow = true">
			 			<u-icon class="" name="arrow-right" color="#999999" size="18"></u-icon>
			 		</view>
			 	</view>  
				<view class="bot" v-else @click="handleToAddress">
					<view class="text">
						<view class="t1">
							点击添加收货地址
						</view>
					</view>
					  <view class="icon2"  @click="addressShow = true">
						<u-icon class="" name="arrow-right" color="#999999" size="18"></u-icon>
					</view>
				</view>
			 </view> 
			<view class="botBox line"> 
				<view class="sbox">
					<view class="line">
						<view class="t1">
							商品总额
						</view>
						<view class="t3">
							￥{{calcAmount.totalAmount}}
						</view>
					</view>
					<view class="line">
						<view class="t1">
							规格
						</view>
						<view class="t3">
							{{spec}}
						</view>
					</view>
					<view class="line" v-if="couponList.length">
						<view class="t1">
							优惠券
						</view>
						<view class="r" @click="couponShow = true">
							 <text class="t3" v-if="couponPrice">-{{couponPrice}}元</text> 
							 <text class="t2" v-else>请选择优惠券</text> 
							 <u-icon class="" name="arrow-right" color="#999999" size="15"></u-icon>
						</view>
					</view>
					<view class="line">
						<view class="t1">
							运费
							<!-- <text>（全场满88免运费)</text> -->
						</view>
						<view class="t3">
							 {{calcAmount.freightAmount ? calcAmount.freightAmount : '包邮'}}
						</view>
					</view>
					<view class="line">
						<view class="t1">
							留言
						</view>
						<textarea v-model="note"   placeholder="请输入您的留言"></textarea>
					</view>
				</view>
				
				<view class="bot">
				  <view class="t1">
						共{{quantity}}件
					</view>  
					<view class="t2">
						合计：<text>￥{{totalAmount}}</text>
					</view>
				</view>
			</view>
			
			
			<u-popup :show="couponShow" @close="couponShow = false" closeable bgColor="#f8f8f8">
				<view class="coupon_box">
					<view class="title">
						优惠券
					</view>
					<view class="sbox"> 
						<view class="couponBox" v-for="item in couponList" :key="item.id" @click="handleChooseCoupon(item.id,item.amount)">
							<view class="text">
								<view class="left">
									<view class="t1">
										￥{{item.amount}}
									</view>
									<view class="t2">
										满{{item.minPoint}}可用
									</view>
								</view>
								<view class="con">
									<view class="t1">
										{{item.name}}
									</view>
									<view class="t2"> 
										{{item.type == 0 ? '全场赠券' : item.type == 1?'会员赠券' : item.type == 2?'购物赠券' : '注册赠券'}} 
									</view>
									<view class="t3">
										有效期至：{{item.endTime}}
									</view>
								</view>
							</view>
							<view class="right">
								<text>立</text>
								<text>即</text>
								<text>使</text>
								<text>用</text> 
							</view>
						</view> 
					</view>
				</view>
			</u-popup>
			
			<u-popup :show="addressShow" @close="addressShow = false" closeable bgColor="#f8f8f8">
				<view class="address_box">
					<view class="title">
						配送至
					</view>
					<view class="sbox">
						 <view class="item" v-for="item in address_list" :key="item.id" @click="handleChangeAddress(item)">
						 	<view class="top">
								<image src="/static/ad.png" mode=""></image>
						 		<text>{{item.name}}</text>
						 		<text>{{item.phoneNumber}}</text>
						 	</view>
						 	<view class="dec">{{item.detailAddress}}</view>
						</view> 
					</view>
				</view>
			</u-popup>
			
			
			<view class="fixedBottom"  :style="{'padding-bottom':bottomPadding?bottomPadding+'px':'15px'}">
				<view class="left">
					<text>订单金额</text>
					<text>￥{{totalAmount}}</text>
				</view>
				<view class="btn"  @click="handleToSuccess">
					提交订单
				</view>
			</view>
		</view>
	</view>
</template>

<script> 
	export default{ 
		data(){
			return{
				quantity:'',
				spec:'',
				addressShow:false,
				couponShow:false,
				ids:[],
				calcAmount:'',
				note:'',
				addressInfo:'',
				shop_list:[],
				address_list:[],
				couponList:[],
				productSkuId:'',
				couponId:'',
				storeId:'',
				couponPrice:'', 
			}
		},
		onLoad(option) {  
			this.productSkuId = option.skuId
			this.storeId = option.storeId
			const confirmOrderInfo = JSON.parse(uni.getStorageSync('confirmOrderInfo'))  
			this.shop_list = confirmOrderInfo.shoppingItemList
			this.spec = JSON.parse(confirmOrderInfo.shoppingItemList[0].productAttr).map(item => item.value).join('_')
			this.calcAmount = confirmOrderInfo.calcAmount
			this.quantity = confirmOrderInfo.shoppingItemList[0].quantity 
			this.address_list = confirmOrderInfo.memberReceiveAddressList
			const defaultAddress = confirmOrderInfo.memberReceiveAddressList.find(item=>item.defaultStatus == 1)
			if(defaultAddress){ 
				this.addressInfo = defaultAddress
			} 
			 this.getCoupon()
		},
		computed:{
			totalAmount(){
				return this.calcAmount.totalAmount - this.couponPrice
			}
		},
		methods:{ 
			handleChooseCoupon(id,price){
				this.couponId = id
				this.couponPrice = price
				this.couponShow = false
			},
			getCoupon(){
				this.$http({
					url:"/member/coupon/list",
					method:"get",
					data:{
						useStatus:0
					}
				}).then(data=>{
					this.couponList = data
				})
			},
			handleChangeAddress(item){
				this.addressInfo = item
				this.addressShow = false
			},
			handleToAddress(){
				uni.navigateTo({
					url:"/pages/user/address/index?choose=1"
				})
			},
			handleToSuccess(){ 
				if(!this.addressInfo){
					uni.showToast({
						title:"请选择地址",
						icon:"none"
					})
					return
				}
				this.$http({
					url:"/order/generateOrder",
					data:{
						storeId:this.storeId,
						note:this.note,
						couponId:this.couponId,
						skuId:this.productSkuId,
						memberReceiveAddressId:this.addressInfo.id,
						count:this.quantity
					}
				}).then(data=>{
					const payInfo = JSON.stringify(data)
					uni.setStorageSync('payInfo',payInfo)
					
					uni.navigateTo({
						url:"/pages/bags/pay"
					}) 
				}) 
			}
		}
	}
</script>
<style>
	page{
		background:#F8F8F8;
	}
</style>

<style lang="scss" scoped>
	
	.address_box{
		padding: 30rpx;
		box-sizing: border-box; 
		.title{
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 48rpx;
		}
		.sbox{
			.item{
				padding-bottom: 26rpx;
				margin-bottom: 26rpx;
				border-bottom: 1px solid #E8E8E8;
				&:last-child{
					border-bottom: none;
				}
				.dec{
					font-size: 24rpx;
					color: #666;
					margin-top: 16rpx;
					padding-left: 44rpx;
				}
				.top{
					display: flex;
					align-items: center;
					image{
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}
					text{
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-right: 30rpx;
					}
				}
			}
		}
	}
		
	.coupon_box{
		padding: 30rpx;
		box-sizing: border-box; 
		.title{
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 48rpx;
		}
	}
	.fixedBottom {
		position: fixed;
		width: 100%;
		background: #fff;
		bottom: 0%;
		left: 0%;
		z-index: 999;
		box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(10,17,24,0.06);
		display: flex;
		padding: 30rpx;
		box-sizing: border-box;
		justify-content: space-between;
		.left{
			flex: 1;
			margin-right: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text{
				font-weight: bold;
				font-size: 36rpx;
						font-family: 'DINPro-Medium';
				color: #020202;
				&:first-child{
					font-size: 32rpx;
				}
			}
		}
		.btn{
			width: 240rpx;
			height: 80rpx;
			background: #020202;
			border-radius: 50rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			font-size: 30rpx;
		}
	}
	.content{
		padding: 30rpx;
		padding-bottom: 60rpx;
		.button{
			width: 100%;
			height: 90rpx;
			background: linear-gradient( 180deg, #579FFD 0%, #5767FD 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-weight: bold;
			font-size: 30rpx;
			margin-top: 40rpx;
		}
		.botBox{ 
				background: #fff;
				margin-top: 30rpx;
				padding: 30rpx; 
				.bot{
					display: flex;
					justify-content: flex-end;
					padding-top: 30rpx;
					margin-top: 30rpx;
					border-top: 1px solid #e8e8e8;
					.t1{
						font-size: 26rpx;
						color: #999999;
					}
					.t2{
						font-size: 28rpx;
						color: #020202;
						margin-left: 30rpx;
					}
				}
			.sbox{
				.line{
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					margin-bottom:50rpx;
					&:last-child{
						margin-bottom: 0;
					}
					.t1{
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
						text{
							font-weight: normal;
							color: #999999;
						}
					}
					.t3{
						font-size: 28rpx;
						color: #020202;
					}
					.r{ 
						display: flex;
						align-items: center;
					}
					.t2{
						font-size: 28rpx;
						color: #999999;
						margin-right: 5rpx;
						
					}
					.timg{
						display: flex;
						align-items: center;
						image{
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}
					}
					textarea{
						flex: 1;
						height: 40rpx;
						font-size: 28rpx;
						text-align: right;
					}
				}
			}
		}
		.shopList{
				background: #fff;
				padding-top: 30rpx;
			.sitem{
				display: flex; 
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
				border-bottom: 1px solid #e8e8e8;
				&:last-child{
					border-bottom: none;
					margin-bottom: 0;
				}
				image{
					width: 180rpx;
					height: 180rpx;
					border-radius: 20rpx;
				}
				.right{
					display: flex;
					flex-direction: column;
					flex: 1;
					margin-left: 30rpx;
					padding-right: 30rpx;
					box-sizing: border-box;
					.name{
						font-size: 30rpx;
						color: #333;
						font-weight: bold;
					}
					.cate{
						font-size: 24rpx;
						color: #999999;
						margin-top: 10rpx;
					}
					.sbot{
						margin-top: auto;
						display: flex;
						align-items: center;
						.price{
							font-size: 30rpx;
						font-family: 'DINPro-Medium';
							color: #333333; 
						} 
						.num{
							font-size: 24rpx;
							color: #999999;
						}
					}
				}
			}
			.item{
				display: flex;
				margin-bottom: 30rpx;
				image{
					width: 187rpx;
					height: 187rpx;
					background: #eee;
					border-radius: 20rpx;
				}
				.text{
					display: flex;
					flex: 1;
					margin-left: 20rpx;
					flex-direction: column;
					.name{
						font-size: 30rpx;
						font-weight: bold;
						word-break: break-all;						text-overflow: ellipsis;						overflow: hidden;						display: -webkit-box;						-webkit-line-clamp: 2;						-webkit-box-orient: vertical;
					}
					.unit{
						font-size: 26rpx;
						color: #858585;
						margin-top: 20rpx;
					}
					.bot{
						display: flex;
						align-items: center;
						margin-top: auto;
						justify-content: space-between;
						.num{
							font-size: 30rpx;
							color: #666;
						}
						.price{
							color: #EC1F1F;
							font-weight: bold;
							margin-top: 6rpx;
							font-size: 24rpx;
							text{
								font-size: 36rpx;
							}
						}
					}
				}
			}
		}
	 .addressInfo {
	 	padding: 26rpx;
	 	box-sizing: border-box;
	 	background: #fff;
		margin-top: 30rpx;
	 	.title{
	 		display: flex;
	 		align-items: center;
	 		font-size: 30rpx;
	 		color: #020202;
	 		font-weight: bold;
	 		margin-bottom: 40rpx;
	 		image{
	 			width: 32rpx;
	 			height: 32rpx;
	 			margin-right: 10rpx;
	 		}
	 	}
		
		.bot{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	 	.text { 
	 		.t1 {
	 			font-size: 28rpx;
	 			color: #333333;
	 			font-weight: bold;
	 			margin-bottom: 10rpx;
	 		}
	 
	 		.t2 {
	 			font-size: 24rpx;
	 			color: #666666;
	 		}
	 	}
	 
	 	.icon2 {
	 		margin-left: auto;
	 	}
	 }
	}
</style>